<template>
  <div class="welcome1 " @click="next()" v-if="welcomeIndex == 1">
    欢迎来到
    <br>一日之计小木屋
    <br>让我们开始计划之旅吧！
  </div>
  
  <div  class="welcome2" @click="next()" v-else-if="welcomeIndex == 2" >
      <div class="tips">
          在正式开始前，
          <br>请写下你来到这里的第一个计划，
          <br>以及期望达到的结果；
          <br>它或许会成为你未来某一天的一个情感共鸣，
          <br>又或者是继续前进的动力。
      </div>
      <div class="attention">
          要认真填写噢！
      </div>
  </div>

  
  <div  class="currentPlan" v-else-if="welcomeIndex == 3">
    <a-form class="form" 
      ref="formRef"
      :rules="rules"
      :model="formState" 
      :label-col="labelCol" 
      :wrapper-col="wrapperCol"
    >
        <a-form-item label="当前计划" name="currentPlan">
            <a-input placeholder="请填写信息" v-model:value="formState.currentPlan" />
        </a-form-item>
        <a-form-item label="未来愿景"  name="featureWish">
            <a-input type="text" placeholder="请填写信息" v-model:value="formState.featureWish" />
        </a-form-item>
    </a-form>

    <div @click="finishConfirm()" class="confirm">
      确认
    </div>

  </div>

  <div  class="planSaveTip"  @click="next()" v-else-if="welcomeIndex == 4">
    好的，
    <br>你的计划在小木屋中已经查收，
    <br>我们会为你妥善保管！
    <br>在未来的某个时刻，
    <br>你或者又会以其他形式与它见面。
    <br>满怀期待吧！
  </div>
</template>

<script setup lang="ts">
import {onMounted,ref,reactive} from 'vue'

import {useRouter} from 'vue-router'

import {addFirstPlanApi} from '@/api/handleUserAccount.js'

const router = useRouter()
const welcomeIndex = ref(1)


const formRef = ref()
const formState = reactive({
    currentPlan: "",
    featureWish: "",
});

const  labelCol = reactive({ span: 7 }) 
const  wrapperCol= reactive({ span: 17 })

const rules = ref({
    currentPlan:[
        {
            required: true,
            message: '请填写信息',
            trigger: 'blur'
        },
    ],
    featureWish:[
         {
            required: true,
            message: '请填写信息',
            trigger: 'blur'
        },
    ],
})


const finishConfirm = () =>{
  formRef.value.validate().then(async (res)=>{
    console.log('表单确认')
    //调用存储用户第一个问题的接口
    let result = addFirstPlanApi(formState)
    if(result){
      //执行下一步
      next()
    }
  }).catch((err)=>{
    console.log(err)
  })
}

onMounted(()=>{

})

const next=()=>{
    if(welcomeIndex.value >= 4){
        // 跳转到正式页面
        router.replace('/role-select')
        return
    }
    welcomeIndex.value +=1

}
</script>

<style lang="less" scoped>

.welcome1,
.welcome2,
.currentPlan,
.planSaveTip
{
  box-sizing: border-box;
  padding: 15px;
  margin: 15px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.welcome1 {
  border: solid 2px;
  padding: 30px;
  gap: 30px;
  font-size: 30px;
  color:#a9a9a9;
  font-weight: bolder;
}

.welcome2 {
  gap: 60px;
  .tips{
    text-align: left;
    padding: 30px;
    font-size: 18px;
    color:black;
    border: solid black 2px;
  }
  .attention{
      font-size: 30px;
      font-weight: bold;
  }
}

.currentPlan{
  gap:30px;

  .confirm{
        background-color: #708775;
        color: white;
        border-radius: 15px;
        padding: 5px 0 5px 20px;
        margin-top: 10px;
        font-size: 18px;
        letter-spacing: 20px;
        width: 50%;
        max-width: 100px;
    }
}
.planSaveTip{
  border: solid black 2px;
  text-align: left;
  padding: 30px;

}



:deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-form-item){
     .ant-form-item-label > label{
        color:#747474;
    }
}

@media (max-width: 575px) {
    :deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-row){
        justify-content: space-between;
    }
    :deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-form-item){
        margin-bottom: 0px;
    }
    :deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-form .ant-form-item .ant-form-item-label){
        flex: 1 1 0; 
        max-width: 30%;
        text-align: end;
    }

    :deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-form .ant-form-item .ant-form-item-control){
        flex: 1 1 0; 
        max-width: 65%; 
    }
}

</style>
